<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>推荐管理</title>
<meta name="decorator" content="default"/>
<script type="text/javascript" src="${ctxStatic}/common/model.js"></script>
<script type="text/javascript" src="${ctxStatic}/crop/cropzoom/1.2/plugin/jquery.cropzoom.js"></script>

<script type="text/javascript">

	//url
	var listUrl = '${ctx}/cms/recommen/';
	var cardUrl = '${ctx}/cms/recommen/form';
	var saveUrl = '${ctx}/cms/recommen/save';
	var groupUrl = '${ctx}/cms/recommen/formGroup';
	
	//按钮状态  {状态值为 0 不可用 ；1 可用}
	var buttonStatus = {};
	buttonStatus.add 	= {add:{id:'btnAdd',st:0},edit:{id:'btnEdit',st:0},save:{id:'btnSubmit',st:1},cancel:{id:'btnCancel',st:1},back:{id:'btnBack',st:1}};
	buttonStatus.edit	= {add:{id:'btnAdd',st:0},edit:{id:'btnEdit',st:0},save:{id:'btnSubmit',st:1},cancel:{id:'btnCancel',st:1},back:{id:'btnBack',st:1}};
	buttonStatus.save   = {add:{id:'btnAdd',st:1},edit:{id:'btnEdit',st:1},save:{id:'btnSubmit',st:0},cancel:{id:'btnCancel',st:0},back:{id:'btnBack',st:1}};
	buttonStatus.cancel = {add:{id:'btnAdd',st:1},edit:{id:'btnEdit',st:"${not empty recommen.id?'1':'0'}"},save:{id:'btnSubmit',st:0},cancel:{id:'btnCancel',st:0},back:{id:'btnBack',st:1}}
	buttonStatus.other  = {add:{id:'btnAdd',st:1},edit:{id:'btnEdit',st:"${not empty recommen.id?'1':'0'}"},save:{id:'btnSubmit',st:0},cancel:{id:'btnCancel',st:0},back:{id:'btnBack',st:1}};

	$(document).ready(function() {
		//$("#name").focus();
		$("#inputForm").validate({
			submitHandler: function(form){
				loading('正在提交，请稍等...');
				form.submit();
			},
			errorContainer: "#messageBox",
			errorPlacement: function(error, element) {
				$("#messageBox").text("输入有误，请先更正。");
				if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
					error.appendTo(element.parent().parent());
				} else {
					error.insertAfter(element);
				}
			}
		});
		
		var currentOpt = "${opt}";
		if(currentOpt==null||currentOpt==''){
			currentOpt = 'other';
		}
		var btnStatus = buttonStatus[currentOpt];
		freshButtonStatus(btnStatus);
		if(currentOpt=='add' || currentOpt=='edit'){
			setAllPageEnable(jQuery("#formAreaId"));
		}else{
			setAllPageDisable(jQuery("#formAreaId"));
		}
	   
	});
	
	function edit(){ //修改记录
		var btnStatus = buttonStatus['edit'];
		freshButtonStatus(btnStatus);
		setAllPageEnable(jQuery("#formAreaId"));
	}
	
	function cancel(){ //取消操作
		//var btnStatus = buttonStatus['cancel'];
		//freshButtonStatus(btnStatus);
		//setAllPageDisable(jQuery("#formAreaId"));
		var url = groupUrl+'?id='+jQuery("[name=id]").val();
		window.location.href = url;
	}
	
	function back(){ //返回
		var btnStatus = buttonStatus['other'];
		freshButtonStatus(btnStatus);
		setAllPageDisable(jQuery("#formAreaId"));
		parent.freshTabs(jQuery(window.parent.document).find('[link="iframeContent1"]'));
	}
	
</script>
<style type="text/css">
.tableHead th, td {
	text-align: center;
}
.deleteTrCss{
	border: 1px solid red;
	background-color: #F07074;
}
</style>
</head>
<body>
	<form:form id="inputForm" modelAttribute="recommen" action="${ctx}/cms/recommen/save" method="post" class="form-horizontal">
		<input type="hidden" name="returnPage" value="${returnPage}">
		<form:hidden path="id"/>
		<sys:message content="${message}"/>	
		<fieldset>
		<div class="breadcrumb form-search" id="toolButtonId">
			<shiro:hasPermission name="cms:recommen:edit">
				<input id="btnEdit" class="btn btn-primary" type="button" value="修 改" onclick="edit()"/>&nbsp;
				<input id="btnSubmit" class="btn btn-primary" type="submit" value="保 存"/>&nbsp;
				<input id="btnCancel" class="btn" type="button" value="取 消" onclick="cancel()"/>
			</shiro:hasPermission>
			<input id="btnBack" class="btn" type="button" value="返 回" onclick="back()"/>
		</div>
		
		<div id="formAreaId">	
			<div class="control-group" style="display: none;">
				<label class="control-label">编码：</label>
				<div class="controls">
					<form:input path="code" htmlEscape="false" maxlength="50" class="input-xlarge required"/>
					<span class="help-inline"><font color="red">*</font> </span>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">推荐类型：</label>
				<div class="controls">
					<form:select path="rescomtype.id" class="input-xlarge ">
						<form:option value="" label="--请选择--"/>
						<form:options items="${fns:getDictList('rescomtype')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
						<span class="help-inline"><font color="red">*</font> </span>
					</form:select>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">显示类型：</label>
				<div class="controls">
					<form:select path="displaytype.id" class="input-xlarge ">
						<form:option value="" label="--请选择--"/>
						<form:options items="${fns:getDictList('displaytype')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
					</form:select>
				</div>
			</div>
			<div class="control-group" style="display: none;">
				<label class="control-label">分组类型：</label>
				<div class="controls">
					<form:select path="grouptype.id" class="input-xlarge ">
						<%-- <form:option value="" label="--请选择--"/> --%>
						<form:options items="${fns:getDictList('grouptype')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
					</form:select>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">所属栏目：</label>
				<div class="controls">
				<sys:treeselect id="category" name="category.id" value="${recommen.category.id}" labelName="" labelValue="${fns:getCategory(recommen.category.id).name}"
					title="所属栏目" url="/cms/category/treeData" cssClass="input-small" allowClear="true" notAllowSelectParent="true"/>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">标题：</label>
				<div class="controls">
					<form:input path="name" htmlEscape="false" maxlength="100" class="input-xlarge required"/>
					<span class="help-inline"><font color="red">*</font> </span>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">TAG标签：</label>
				<div class="controls">
					<form:input path="tag" htmlEscape="false" maxlength="64" class="input-xlarge "/>
				</div>
			</div>
			<div class="control-group"  style="display: ;">
				<label class="control-label">顺序：</label>
				<div class="controls">
					<form:input path="sort" htmlEscape="false" maxlength="11" class="input-xlarge  digits"/>
				</div>
			</div>
			<div class="control-group" style="display: none;">
				<label class="control-label">发布状态：</label>
				<div class="controls">
					<form:select path="ispublish.id" class="input-xlarge ">
						<form:option value="" label="--请选择--"/>
						<form:options items="${fns:getDictList('publishstatus')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
					</form:select>
				</div>
			</div>
			
			<div class="control-group">
				<label class="control-label">链接类型：</label>
				<div class="controls">
					<form:select path="linktype.id" class="input-xlarge ">
						<form:option value="" label="--请选择--"/>
						<form:options items="${fns:getDictList('linktype')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
					</form:select>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">链接：</label>
				<div class="controls">
					<form:input path="links" htmlEscape="false" maxlength="64" class="input-xlarge "/>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">关联文章：</label>
				<div class="controls">
					<form:input path="article" htmlEscape="false" maxlength="64" class="input-xlarge "/>
				</div>
			</div>
			
			<legend>推荐列表</legend>
				<div class="control-group" id="childrenDivId">
					<div class="breadcrumb form-search"  style="margin-bottom: 3px;" >
						<input id="btnAdd" class="btn btn-primary" type="button" value="增 行" onclick="addLine()"/>&nbsp;
						<input id="btnEdit" class="btn btn-primary" type="button" value="编 辑" onclick="editLine()"/>&nbsp;
						<input id="btnDel" class="btn btn-primary" type="button" value="删 行" onclick="delLine()"/>&nbsp;
						<input id="btnDel" class="btn btn-primary" type="button" value="排序" onclick="sortLine()"/>&nbsp;
					</div>
					<table id="contentTable" class="table table-striped table-bordered table-condensed">
						<thead>
							<tr class="tableHead">
								<th style="text-align:center;" onclick="toggleCheckBox('checkboxName',this)">
						  			<input type="checkbox" checkboxName="sort" name="table_form_checkbox_all" value="">
						  		</th>
						  		<th style="text-align:center;">序号</th>
								<th>标题</th>
								<th>显示类型</th>
								<th>链接类型</th>
								<th>顺序</th>
								<th>发布状态</th>
								<th>描述</th>
								<th>更新时间</th>
								<shiro:hasPermission name="cms:recommen:edit"><th>操作</th></shiro:hasPermission>
							</tr>
						</thead>
						<tbody name="dataTbody">
						<c:forEach items="${recommen.recommenList}" var="column" varStatus="status">
							<tr${column.delFlag eq '1'?' class="error" title="已删除的列，保存之后消失！"':''}>
								<td nowrap style="text-align:center;">
									<input type="hidden" name="recommenList[${status.index}].id" value="${column.id}"/>
									<input type="checkbox" name="recommenList[${status.index}].sort1" attrname="sort" value="${column.sort}">
									<input type="hidden" name="recommenList[${status.index}].code" value="${column.code}" />
									<input type="hidden" name="recommenList[${status.index}].grouptype.id" value="${column.grouptype.id}"/>
									<input type="hidden" name="recommenList[${status.index}].rescomtype.id" value="${column.rescomtype.id}"/>
									<input type="hidden" name="recommenList[${status.index}].category.id" value="${column.category.id}"/>
									<input type="hidden" name="recommenList[${status.index}].article" value="${column.article}"/>
									<input type="hidden" name="recommenList[${status.index}].infotype.id" value="${column.infotype.id}"/>
									<input type="hidden" name="recommenList[${status.index}].infoposition.id" value="${column.infoposition.id}"/>
									<input type="hidden" name="recommenList[${status.index}].tag" value="${column.tag}"/>
									<input type="hidden" name="recommenList[${status.index}].delFlag" value="${column.delFlag}"/>
								</td>
								<td style="text-align:center;">
									<span attrname="number">${ status.index + 1}</span>
								</td>
								<td>
									<input type="hidden" name="recommenList[${status.index}].name" value="${column.name}" maxlength="200" class="required" style="width:100px;"/>
									<span attrname="recommenList[${status.index}].name">${column.name}</span>
								</td>
								<td>
									<input type="hidden" name="recommenList[${status.index}].displaytype.id" value="${column.displaytype.id}" maxlength="200" class="required" style="width:100px;"/>
									<span attrname="recommenList[${status.index}].displaytype.id">${fns:getDictByTypeValue(column.displaytype.id,'displaytype').label}</span>
								</td>
								<td>
									<input type="hidden" name="recommenList[${status.index}].linktype.id" value="${column.linktype.id}" maxlength="200" class="required" style="width:100px;"/>
									<span attrname="recommenList[${status.index}].linktype.id">${fns:getDictByTypeValue(column.linktype.id,'linktype').label}</span>
								</td>
								<td>
									<input type="text" name="recommenList[${status.index}].sort" value="${column.sort}" maxlength="200" class="required" style="width:100px;"/>
								</td>
								<td>
									<input type="hidden" name="recommenList[${status.index}].ispublish.id" value="${column.ispublish.id}" maxlength="200" class="required" style="width:100px;"/>
									<span attrname="recommenList[${status.index}].ispublish.id">${fns:getDictByTypeValue(column.ispublish.id,'ispublish').label}</span>
								</td>
								<td>
									<input type="hidden" name="recommenList[${status.index}].remarks" value="${column.remarks}" maxlength="200" class="required" style="width:100px;"/>
									<span attrname="recommenList[${status.index}].remarks">${column.remarks}</span>
								</td>
								<td>
									<input type="hidden" name="recommenList[${status.index}].updateDate" value="${column.updateDate}" maxlength="200" class="required" style="width:100px;"/>
									<span attrname="recommenList[${status.index}].updateDate">
										<fmt:formatDate value="${recommen.updateDate}" pattern="yyyy-MM-dd HH:mm:ss"/>
									</span>
								</td>
								<shiro:hasPermission name="cms:recommen:edit"><td>
									<a class="aBtn" href="javascript:void(0);" onclick="editLine(this)">修改</a>
									<a class="aBtn" href="javascript:void(0);" onclick="delLine(this)">删除</a>
								</td></shiro:hasPermission>
							</tr>
						</c:forEach>
						
						</tbody>
						</table>
				</div>
		</fieldset>
	</form:form>
	<div style="height: 50px;width: 100%;"></div>
	
	<table style="display: none">
		<tr class="trTemplate">
			<td nowrap style="text-align:center;">
				<input type="hidden" name="recommenList[index].id" value=""/>
				<input type="checkbox" name="recommenList[index].sort1" attrname="sort" value="">
				<input type="hidden" name="recommenList[index].code" value="" maxlength="200" class="required" style="width:100px;"/>
				<input type="hidden" name="recommenList[index].grouptype.id" value=""/>
				<input type="hidden" name="recommenList[index].rescomtype.id" value=""/>
				<input type="hidden" name="recommenList[index].category.id" value=""/>
				<input type="hidden" name="recommenList[index].article" value=""/>
				<input type="hidden" name="recommenList[index].infotype.id" value=""/>
				<input type="hidden" name="recommenList[index].infoposition.id" value=""/>
				<input type="hidden" name="recommenList[index].tag" value=""/>
				<input type="hidden" name="recommenList[index].delFlag" value="0"/>
			</td>
			<td style="text-align:center;">
				<span attrname="number"></span>
			</td>
			<td>
				<input type="hidden" name="recommenList[index].name" value="" maxlength="200" class="required" style="width:100px;"/>
				<span attrname="recommenList[index].name"></span>
			</td>
			<td>
				<input type="hidden" name="recommenList[index].displaytype.id" value="" maxlength="200" class="required" style="width:100px;"/>
				<span attrname="recommenList[index].displaytype.id"></span>
			</td>
			<td>
				<input type="hidden" name="recommenList[index].linktype.id" value="" maxlength="200" class="required" style="width:100px;"/>
				<span attrname="recommenList[index].linktype.id"></span>
			</td>
			<td>
				<input type="text" name="recommenList[index].sort" value="" maxlength="200" class="required" style="width:100px;"/>
			</td>
			<td>
				<input type="hidden" name="recommenList[index].ispublish.id" value="" maxlength="200" class="required" style="width:100px;"/>
				<span attrname="recommenList[index].ispublish.id"></span>
			</td>
			<td>
				<input type="hidden" name="recommenList[index].remarks" value="" maxlength="200" class="required" style="width:100px;"/>
				<span attrname="recommenList[index].remarks"></span>
			</td>
			<td>
				<input type="hidden" name="recommenList[index].updateDate" value="" maxlength="200" class="required" style="width:100px;"/>
		   		<!-- <span attrname="recommenList[index].updateDate"></span> -->
		   </td>
			<shiro:hasPermission name="cms:recommen:edit"><td>
				<a class="aBtn" href="javascript:void(0);" onclick="editLine(this)">修改</a>
				<a class="aBtn" href="javascript:void(0);" onclick="delLine(this)">删除</a>
			</td></shiro:hasPermission>
		</tr>
	</table>
	<div id="dialog" title="新增推荐" style="display: none;"> <!-- width: 1000px;height: 500px; -->
		<iframe id="iframeForm" name="iframeForm" style="width:100%;height:98%;border: 0px;" ></iframe>
	</div>
	
	<script type="text/javascript">
		
	var formChildUrl = '${ctx}/cms/recommen/formChild';
	var dialogOpts = { 
			width : 1000,
			height: 600,
			modal: false,
			buttons: {       
			} 
	}; 
	
	function addLine(){
		var rescomtypeId = jQuery('[name="rescomtype.id"]').val();
		if(rescomtypeId == null || rescomtypeId == ''){
			alertx("请选择推荐类型");return ;
		}
		
		var url = formChildUrl+'?parentCode='+jQuery('#formAreaId').find('[name="code"]').val();
		url +='&rescomtype.id='+rescomtypeId;
		url +='&grouptype.id='+2;
		url +='&infoposition.id='+0;
		
		openWindows(dialogOpts,url);
	}
	
	function editLine(obj){
		var curentTr = null;
		if (obj != null) {
			curentTr = jQuery(obj).parents('tr')[0];
		} else {
			var table = jQuery("#contentTable");
			var checkboxs = jQuery('input[attrname="sort"]:checked', table);
			if (checkboxs.length == 0) {
				alertx("请选择一行数据！");return;
			} else if (checkboxs.length > 1) {
				alertx("只能选择一行数据！");return;
			}
			curentTr = jQuery(checkboxs[0]).parents('tr')[0];
		}
		if (curentTr != null || curentTr != '') {
			var url = formChildUrl+'?parentCode='+jQuery('#formAreaId').find('[name="code"]').val();
			var childrenDiv = jQuery(curentTr);
			var htmlForm = childrenDiv.html();
			jQuery( "#dialog" ).dialog(dialogOpts);
			
			var html = '<form action="'+url+'" modelAttribute="recommen" method="post" target="_self" id="postData_form">'
			+  htmlForm+   '</form>';
			jQuery('#iframeForm')[0].contentWindow.document.write(html); 
			jQuery('#iframeForm')[0].contentWindow.document.getElementById('postData_form').submit();
			
		}
	}
	
	function delLine(obj){
		if (obj != null) { //单个删除
			var curentTr = jQuery(obj).parents('tr')[0];
			var id = jQuery('[attrname="id"]', curentTr).val();
			var url = listUrl + 'delete?id=' + id;
			deleteSelectLine(curentTr);
			
		} else { //批量删除
			var table = jQuery("#contentTable");
			var checkboxs = jQuery('input[name="sort"]:checked', table);
			if (checkboxs.length == 0) {
				alertx("请选择至少一行数据！");
				return;
			}
			var ids = [];
			for (var i = 0; i < checkboxs.length; i++) {
				var curentTr = jQuery(checkboxs[i]).parents('tr')[0];
				deleteSelectLine(curentTr);
			}
		}
	}
	
	function cancelDelLine(obj){
		if (obj != null) { //单个删除
			var curentTr = jQuery(obj).parents('tr')[0];
			var id = jQuery('[attrname="id"]', curentTr).val();
			var url = listUrl + 'delete?id=' + id;
			cancelDelSelectLine(curentTr);
		} else { //批量删除
			var table = jQuery("#contentTable");
			var checkboxs = jQuery('input[name="sort"]:checked', table);
			if (checkboxs.length == 0) {
				alertx("请选择至少一行数据！");
				return;
			}
			var ids = [];
			for (var i = 0; i < checkboxs.length; i++) {
				var curentTr = jQuery(checkboxs[i]).parents('tr')[0];
				cancelDelSelectLine(curentTr);
			}
		}
	}
	
	function deleteSelectLine(curentTr){
		jQuery(curentTr).find('[name*=".delFlag"]').val(1);
		jQuery(curentTr).addClass("deleteTrCss");
		//jQuery(curentTr).remove();
		jQuery(curentTr).css('display','none');
	}
	
	function cancelDelSelectLine(curentTr){
		jQuery(curentTr).find('[name*=".delFlag"]').val(0);
		jQuery(curentTr).removeClass("deleteTrCss");
	}
	
	//打开窗口
	function openWindows(dialogOpts,url){
		jQuery('#iframeForm').attr('src','');
		jQuery('#iframeForm').attr('src',url);
		$( "#dialog" ).dialog(dialogOpts);
	}
	
	//关闭窗口
	function closeWindows(){
		$( "#dialog" ).dialog( "close" );
	}
	
	//加载行数据
	function loadLineData(data){
		var code = data.code==null?null:data.code.value;
		var rowno = 0;debugger;
		var trObj = null;
		
		trObj =  jQuery('#contentTable').find('input[name*=".code"][value="'+code+'"]').parents('tr')[0];
		//获取行号
		if(trObj== null || code == null || code == ''){
			rowno = jQuery('#contentTable').find('[name="dataTbody"]').find('tr').length+1;
			var trTemplateObj = jQuery('.trTemplate');
			var newTrObj = trTemplateObj.clone();
			jQuery('#contentTable').find('[name="dataTbody"]').append(newTrObj);
			initTrobj(newTrObj,rowno);
			if(rowno%2==1){
				newTrObj.attr('class','trEvenClass');
			}
			trObj = newTrObj[0];
		}else{
			rowno =jQuery(trObj).find('[attrname="number"]').html();
		}
		var listName = 'recommenList['+(rowno-1)+']';
		setDataByTrObj(trObj,data,listName);		
	}
	
	function initTrobj(trObj,rowno){
		jQuery(trObj).find('input').each(function(i,v){
			var name = jQuery(this).attr('name');
			if(name!=null&&name!=''){
				var name = name.replace('index',rowno-1);
				jQuery(this).attr('name',name);
			}
		});
		jQuery(trObj).find('span[attrname]').each(function(i,v){
			var name = jQuery(this).attr('attrname');
			if(name!=null&&name!=''){
				var name = name.replace('index',rowno-1);
				jQuery(this).attr('attrname',name);
			}
		});
		jQuery(trObj).find('[attrname="number"]').html(rowno);
	}
	
	function setDataByTrObj(trObj,data,listName){
		if(trObj==null){
			return false;
		}
		for(var key in data){
			var input = data[key];
			var attrName = listName+'.'+input.key;
			jQuery(trObj).find('[name="'+attrName+'"]').val(input.value);
			jQuery(trObj).find('[attrname="'+attrName+'"]').html(input.label);
		}
	}
	
	function sortLine(){
		
	}
		
	</script>
</body>
</html>